<template>
  <div class="banner">
     <Header>
		<div class="title"><span class="title-span">修改呢称</span></div>
		<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
		</Header>

        <van-field 
        label="昵称"
        v-model="nickname"
        placeholder="请输入用户名"

        />

  <div style="margin: 16px;">
    <van-button
     round block type="info"
     class="footer-item" 
     @click="edit_nickname"
     >确定</van-button>
  
  </div>
 </div>
</template>

<script>
import { NavBar,Form, Field,Icon, } from 'vant';


console.log(NavBar)
console.log(Form);
console.log(Field);
console.log(Icon);


export default {
  name:"edit",
  components:{
    [NavBar.name]:NavBar,
    [Field.name]:Field,
    [Icon.name]:Icon,
  },
  data(){
    return {
     nickname:'',
    //  edit_nickname:""
    }
  },
  created() {
    this.nickname = this.$route.query.nickname
  },
  methods:{
    onSubmit(values) {
      console.log('submit', values);
    },
    edit_nickname() {
        let {nickname} = this;
        if(nickname.trim().length === 0 ) {
            this.$toast('不能为空')
            return
        }
        // this.$bus.$emit('change_nickname',this.nickname);


        sessionStorage.setItem('nickname',nickname)
        setTimeout(v=>{
            this.$router.back()
        },300)
    }
  }
  
 
}
</script>

<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 20px;
  top: -25px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 170px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
 .banner-item {
  background-color: green;
 }
 .footer-item {
  background-color: green;
 }

</style>